<template>
  <view class="container">
    <view class="avatar" v-if="store.supid">
      <span>微信头像:</span>
      <!-- 上传组件 -->
      <u-upload
        name="product_img"
        :maxCount="1"
        :fileList="filelist1"
        width="100"
        height="100"
      
      />
    </view>
    <view class="avatar">
      <span>门店图片:</span>
      <!-- 上传组件 -->
      <u-upload
        name="product_img"
        :maxCount="1"
        :fileList="filelist"
        width="100"
        height="100"
        @delete="del"
        @afterRead="read"
      />
    </view>


    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="store"
        :rules="rules"
        ref="product"
      >
        <!-- 名称 -->
        <u-form-item label="标题" prop="name">
          <u-input
            v-model="store.name"
            ref="title"
            placeholder="请输入门店名称"
          />
        </u-form-item>
        <u-form-item label="店铺评分" prop="rate">
          <u-input
            v-model="store.rate"
            ref="title"
            placeholder="请输入门店评分（最高5分）"
          />
        </u-form-item>
        <u-form-item label="店铺质量" prop="quality">
          <u-input
            v-model="store.quality"
            ref="title"
            placeholder="请输入门店产品质量（最高10）"
          />
        </u-form-item>
        <u-form-item label="物流速度" prop="speed">
          <u-input
            v-model="store.speed"
            ref="title"
            placeholder="请输入门店平均发货速度（最高10.0）"
          />
        </u-form-item>
        <u-form-item label="服务保障" prop="guarantee">
          <u-input
            v-model="store.guarantee"
            ref="title"
            placeholder="请输入门店服务保障（最高10）"
          />
        </u-form-item>
        <u-form-item label="发货时长" prop="dispatch">
          <u-input
            v-model="store.dispatch"
            ref="title"
            placeholder="请输入门店平均发货时间"
          />
        </u-form-item>
        <u-form-item label="粉丝数量" prop="fensi">
          <u-input
            v-model="store.fensi"
            ref="title"
            placeholder="请输入门店粉丝数量"
          />
        </u-form-item>
        <u-form-item label="平均好评(%)" prop="pstrv">
          <u-input
            v-model="store.pstrv"
            ref="title"
            placeholder="请输入门店平均好评率(单位%)"
          />
        </u-form-item>
        <u-form-item label="客服评价(%)" prop="customer">
          <u-input
            v-model="store.customer"
            ref="title"
            placeholder="请输入门店客服满意程度(单位%)"
          />
        </u-form-item>
        <u-form-item label="微信昵称" v-if="store.supid">
          <u-input
            v-model="store.supplier.nickname"
            ref="title"
            placeholder="请输入微信昵称"
          />
        </u-form-item>
        <u-form-item label="店长" v-if="store.supid">
          <u-input
            v-model="store.supplier.realnickname"
            placeholder="店长真名"
          />
        </u-form-item>
        <u-form-item label="店长手机" v-if="store.supid">
          <u-input
            v-model="store.supplier.mobile"
            placeholder="店长手机号"
          />
        </u-form-item>
        <!-- 门热门状态 -->
        <u-form-item
          label="热度状态"
          prop="flag"
          borderBottom
          @click="showstore = true"
        >
          <u-input
            v-model="store.flag_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择门店热门状态"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="门店电话" prop="mobile">
          <u-input
            v-model="store.mobile"
            placeholder="请输入门店电话热线"
          />
        </u-form-item>
         <view class="Box1">
              <view class="heng">商品分类:</view >
          <view
            v-for="(protype, index) in store.ptypedata"
            :key="index"
            class="service-item"
          >
            <view class="checkbox-wrapper">
              <checkbox
                :checked="protype.checked"
                @click="toggleCheck1([index,protype.id,protype.name,protype.checked])"
              ></checkbox>
            </view>
            <view class="service-name">{{ protype.name }}</view>
          </view>
        </view>
        <u-form-item label="门店地址" prop="address">
          <u-input
            v-model="store.address"
            placeholder="请输入门店地址"
          />
        </u-form-item>
        <view class="Box">
            <view class="heng">服务分类:</view>
          <view
          
            v-for="(service, index) in store.carwashtype"
            :key="index"
            class="service-item"
          >
            <view class="checkbox-wrapper">
              <checkbox
                :checked="service.checked"
                @click="toggleCheck([index,service.id,service.name,service.checked])"
              ></checkbox>
            </view>
            <view class="service-name">{{ service.name }}</view>
          </view>
        </view>
        <u-form-item label="创建时间" prop="createtime_text">
          <u-input v-model="store.createtime_text" disabled  />
        </u-form-item>
        <u-form-item label="经度" prop="jd">
          <u-input v-model="store.jd" placeholder="请输入门店经度" />
        </u-form-item>
        <u-form-item label="纬度" prop="wd">
          <u-input v-model="store.wd" placeholder="请输入门店维度" />
        </u-form-item>

        <u-action-sheet
          :show="showstore"
          :actions="flaglist"
          title="请选门店热门状态"
          @close="showstore = false"
          @select="flagSelect()"
        >
        </u-action-sheet>

        <!-- 提交按钮 -->
        <u-button
          text="修改门店"
          icon="pushpin"
          size="small"
          type="success"
          :customStyle="btnStyle"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
  
<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();

    this.stoid = options.stoid ? options.stoid : "";

    this.list();

    this.getflagdata();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    setInterval(() => {
      this.$u.count.check();
    }, 15000);
  },

  data() {
    return {
      services: [
      
      ],
      filelist: [],
      filelist1: [],
      auth: {},
      flag: "",
      stoid: 0,
      flaglist: [],
      newthumbArr :[],
      showstore: false,
      store: {
        carwashtype:{}
      },
      piclist: [],

      rules: {
        name: {
          required: true,
          message: "请填写门店名称",
          trigger: ["blur", "change"],
        },
        mobile: {
          required: true,
          message: "门店联系电话不能为空",
          trigger: ["blur", "change"],
        },
        address: {
          required: true,
          message: "门店地址不能为空",
          trigger: ["blur", "change"],
        },
        flag: {
          required: true,
          message: "门店状态不能为空",
          trigger: ["blur", "change"],
        },

        createtime_text: {
          required: true,
          message: "创建时间不能为空",
          trigger: ["blur", "change"],
        },
        jd: {
          required: true,
          message: "门店经度不能为空",
          trigger: ["blur", "change"],
        },
        wd: {
          required: true,
          message: "门店维度不能为空",
          trigger: ["blur", "change"],
        },
       
      },
    };
  },

  methods: {
   
    toggleCheck(index) {
      // 改变勾选取消或者选上
      // console.log(this.store.carwashtype)
      this.store.carwashtype[index[0]].checked = !this.store.carwashtype[index[0]].checked;
      // 可以在这里调用相应的方法或监听属性变化进行后续操作

         },
    toggleCheck1(index) {
      // 改变勾选取消或者选上
      // console.log(this.store.carwashtype)
      this.store.ptypedata[index[0]].checked = !this.store.ptypedata[index[0]].checked;
      // 可以在这里调用相应的方法或监听属性变化进行后续操作

         },
    flagSelect(e) {
      this.store.flag_text = e.name;
      this.flag = e.flag;
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        this.store.thumb_text = result.data;
        // 合并对象
        this.filelist = [{ url: result.data }];
        this.newthumbArr = this.newthumbArr.concat(result.data)

        return false;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },

    product() {
      this.$refs.product
        .validate()
        .then(async () => {
          var data = {
            id: this.stoid,
            name: this.store.name,
            thumb: this.store.thumb_text,
            adminid: this.auth.id,
            address: this.store.address,
            flag: this.flag,
            jd: this.store.jd,
            wd: this.store.wd,
            mobile: this.store.mobile,
            services:this.store.carwashtype,
            protypedata:this.store.ptypedata,
            customer:this.store.customer,
            rate:this.store.rate,
            quality:this.store.quality,
            speed:this.store.speed,
            guarantee:this.store.guarantee,
            pstrv:this.store.pstrv,
            dispatch:this.store.dispatch,
            fensi:this.store.fensi,
            newthumbArr :this.newthumbArr 
            
            

          };

          let result = await this.$u.api.store.storeedit(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.$u.route({
                  type: "reLaunch",
                  url: "/pagesC/store/edit",
                  params: {
                    stoid: this.stoid,
                  },
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
    async getflagdata() {
      let data = {
        adminid: this.auth.id,
      };

      let result = await this.$u.api.store.getflaglist(data);

      if (result.code) {
        this.flaglist = result.data;
      }
    },

    async del(e) {
      let data = {
        adminid: this.auth.id,
        stoid: this.stoid,
        url: e.file.url,
      };

      var result = await this.$u.api.product.delstoreimage(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1000,
          complete: () => {
            if (e.index == 0) {
              this.filelist.splice(e.index, e.index);

              this.filelist = [];
            }
          },
        });
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
          duration: 1000,
        });
      }
    },

    async list() {
      let data = {
        stoid: this.stoid,
        adminid: this.auth.id,
      };
      let result = await this.$u.api.store.storeinfo(data);
      if (result.code) {
        this.store = result.data;
        this.flag = this.store.flag;

        if (this.store.thumb_text) {
          // 把一维数组循环出来然后组装一个自己想要的结构
          this.filelist = [{ url: this.store.thumb_text }];
        }
       
          this.filelist1 = [
            {
              url:this.store.supplier.avatar
            }
          ]

          console.log(this.filelist1)
        
      } else {
        this.$refs.notice.show({
          type: "warning",
          message: result.msg,
        });
      }
    },
  },
};
</script>
  
<style >

.heng{
  width:200px;
  text-align:left;
  padding-top:15px;
  padding-bottom:15px
}
.Box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;

  justify-content: space-between;
}
.Box1 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;

  justify-content: space-between;
}
.service-item {
  display: flex;
  width: 130px;

  align-items: center;
  padding: 10rpx;
}

.checkbox-wrapper {
  margin-right: 10rpx;
}

.service-name {
  font-size: 28rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: 14px;
  color: #272424 !important;
}
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}
</style>
  